'use client'

import Link from 'next/link'
import { useState } from 'react'
import { usePathname } from 'next/navigation'
import ThemeToggle from './ThemeToggle'
import SearchDialog from './SearchDialog'

const navLinks = [
  { href: '/', label: '首页' },
  // { href: '/categories', label: '分类' },
  // { href: '/tags', label: '标签' },
  { href: '/archives', label: '归档' },
  { href: '/projects', label: '项目' },
  { href: '/resume', label: '简历' },
  { href: '/about', label: '关于' },
]

export default function Navigation() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isSearchOpen, setIsSearchOpen] = useState(false)
  const pathname = usePathname()

  const isActive = (path: string) => {
    if (path === '/') {
      return pathname === '/'
    }
    return pathname.startsWith(path)
  }

  return (
    <>
      {isSearchOpen && <SearchDialog onClose={() => setIsSearchOpen(false)} />}
      <header className="sticky top-0 z-40 bg-white dark:bg-gray-800 shadow">
        <nav className="max-w-4xl mx-auto p-4 md:py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-8">
              <Link 
                href="/" 
                className={`text-xl font-bold dark:text-white hover:text-blue-600 dark:hover:text-blue-400 `}
              >
                博客
              </Link>
              <div className="hidden md:flex space-x-6">
                {navLinks.map(link => (
                  <Link
                    key={link.href}
                    href={link.href}
                    className={`transition-colors ${
                      isActive(link.href)
                        ? 'text-blue-600 dark:text-blue-400'
                        : 'text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400'
                    }`}
                  >
                    {link.label}
                  </Link>
                ))}
              </div>
            </div>
            
            <div className="flex items-center space-x-4">
              <button
                className="hidden md:flex items-center px-3 py-1.5 text-sm bg-gray-100 dark:bg-gray-700 rounded-lg text-gray-600 dark:text-gray-300"
                onClick={() => setIsSearchOpen(true)}
              >
                <span className="mr-2">搜索</span>
                <kbd className="px-1.5 py-0.5 text-xs bg-white dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600">
                  ⌘K
                </kbd>
              </button>
              <ThemeToggle />
              <button
                className="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
                onClick={() => setIsMenuOpen(!isMenuOpen)}
              >
                {isMenuOpen ? '✕' : '☰'}
              </button>
            </div>
          </div>

          {/* 移动端菜单 */}
          {isMenuOpen && (
            <div className="md:hidden mt-4 space-y-2">
              {navLinks.map(link => (
                <Link
                  key={link.href}
                  href={link.href}
                  className={`block py-2 px-4 rounded-lg transition-colors ${
                    isActive(link.href)
                      ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
                      : 'hover:bg-gray-100 dark:hover:bg-gray-700 dark:text-gray-300'
                  }`}
                  onClick={() => setIsMenuOpen(false)}
                >
                  {link.label}
                </Link>
              ))}
            </div>
          )}
        </nav>
      </header>
    </>
  )
} 